<template>
	<view >
		<scroll-view style="height:1400rpx" :refresher-enabled="refresher" :refresher-triggered="triggered" @refresherrefresh="refresh" scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrollLower">
			
			<navigator v-for="(item,index) in webList" class="content" :url="`/subpkg/blog-detail/blog-detail?id=${item.id}`">
					
					<view>
						<view class="row" style="height: 180rpx;">
							<view v-if="item.label1">
								<image :src="item.label1"  style="width: 150rpx;height: 150rpx;margin-top: 20rpx;margin-right: 10rpx;"></image>
							</view>
							<view v-else>
								<image src="../static/upload.png"  style="width: 150rpx;height: 150rpx;margin-top: 20rpx;margin-right: 10rpx;"></image>
							</view>
							<view class="row_right">
								<view class="assistant_ly" >
									<text class="shenglue" style="font-size: 50rpx;">{{item.title}}</text>
									<text class="shenglue" style="flex-direction: inherit;font-size: 30rpx;">{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
					
					<view style="background: #C0C0C0;height: 1rpx;width: 100%;"></view>
				
			</navigator>
			<!-- <view class="loading" v-if="loading">正在加载更多...</view> -->
			<!-- <view v-else class="nomore">暂无更多内容</view> -->
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		props:{
			searchText:{	//选择块级显示还是圆形显示
				type: String,
				default: ''
			},
			
		},
		mounted() {
			this.open();
		},
		onLoad() {
			this.open();
		},
		onShow() {
			this.open();
		},
		data() {
			return {
				page:1, // 第一页 
				allpage:3, // 总页数
				loading:true, // 加载状态
				scrollTop:0,
				height:'0px',
				refresher:false,
				triggered:false,
				canQuery:true,
				webList:[],
				search:this.searchText
			};
		},
		methods:{
			open(){
				this.webList=[];
				this.allpage = 0;
				this.page=1;
				this.getBlogList();
			},
			openSearch(e){
				this.search=e;
				this.open();
			},
			
			async getBlogList(){
				console.log('canQuery',this.canQuery);
				if(this.canQuery){
					
					this.canQuery = false;
					
					const {data:res} =await uni.$http.post('/blog/page_blog_vo?rows=10&page='+this.page,{title:this.search});
				
					let length = res.data.records.length;
					for (var i = 0; i < length; i++) {
						this.webList.push(res.data.records[i]);
					}
					this.allpage = res.data.pages;
					this.page=res.data.pageNum+1;
					this.canQuery = true;
					 this.$emit('calHeight');
				}
				
			},
			
			refresh(){
				this.webList = [];
				this.allpage = 0;
				this.page=1;
				this.getBlogList();
				var that = this;
					if(!this.triggered){
						this.triggered = true; //下拉加载，先让其变true再变false才能关闭
						//关闭加载状态 (转动的圈)，需要一点延时才能关闭
						setTimeout(e =>{
							that.triggered = false;
						},100)
					}
				
			},
			
			
			
			scrollLower(){
				if(this.page<=this.allpage||this.allpage==0){
					this.getBlogList();
				}else{
					this.loading=false
				}
					
			}

			
			
		}
	}
</script>

<style lang="scss">

.loading{
	text-align: center;
}
.nomore{
	text-align: center;
}
.title{
	font-weight: bold;
	font-size: 50rpx;
}
.detail{
	color: #999;
}
.content{
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 20rpx;
}
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
page {
   }
   .line{
   	width: 100%;
   	height: 10px;
   }
   .assistant_ly{
     text-align: left;
     display:flex;
     flex-direction:column;
     background-color: white;
     justify-content: center;
   }


	.line{
		width: 100%;
		height: 10px;
	}
	.row {
		margin-bottom: 10rpx;
		background: white;
		display: flex;
		width: 100%;
		height: 50px;

		.row_logo {
			width: 18%;
			display: flex;
			align-items: center;

			image {
				width: 32px;
				height: 32px;
				margin: auto;
				border-radius: 5px;
			}
		}

		.row_right {
			position: relative;
			height: 100%;
			width: 84%;
			display: flex;
			align-items: center;
			flex-direction: row; 
			align-items: center;
			border: {
				bottom: 1px solid #DDDDDD;
			}

			text {
				font-size: 16px;
				font-family: 'syht';
				display: block;
			}
			.icon_right{
				position: absolute;
				right: 10px;
				width: 15px;
				height: 35px;
				opacity: .5;
			}

		}



	}

	.row:last-child {
		.row_right {
			border: 0;
		}
	}
	
	
	// 文本过长显示省略号，一般高度固定且不是auto
	.shenglue {
	        width: 500rpx;
	        margin-top: 15rpx;
	        color: #333333;
	        font-size: 0.7em;
	        overflow: hidden;
	        text-overflow:ellipsis;
	        white-space: nowrap;
	}
	
	// 文本过长换行显示，高度不固定
	.huanhang {
	        display:inline-block;
	        width: 100%;
	        height: auto;
	        font-family: Gibson;
	        font-size: 15px;
	        word-break: break-all;
	        text-overflow: ellipsis;
	        word-wrap: break-word;
	        white-space: pre-wrap;
	}

</style>
